<template>
	<view class="container">
		<view class="dropdown-module">
			<ren-dropdown-filter class="fixed" @click="hideVideo" openDate :filterData='filterData' :defaultIndex='defaultIndex'
			 @onSelected='onSelected' @dateChange="dateChange"></ren-dropdown-filter>
		</view>
		<!-- 视频区域 -->
		<view class="video-module">
			<!-- 界面视频 -->
			<video id="myVideo" :show-fullscreen-btn="false" v-if="showVideo" :src="myVideoSrc" @error="videoErrorCallback"
			 controls></video>
			<!-- 视频替代品view -->
			<view class="video-cover" v-else></view>
			<!-- 截图 -->
			<canvas canvas-id="canvas" style="display:none"></canvas>
			<!-- 操作键 -->
			<scroll-tabs :tabs="tabs" @change="controlVideo"></scroll-tabs>
		</view>
		<!-- 文件列表 -->
		<view class="document-module">
			<view class="doc-title">
				文件列表
			</view>
			<view class="doc-list">
				<table>
					<tr class="border">
						<th class="wid15 ">序号</th>
						<th class="wid20 ">文件大小</th>
						<th class="wid20 ">起始时间</th>
						<th class="wid20 ">结束时间</th>
						<th class="wid25 ">控制</th>
					</tr>
					<!-- 循环每条数据 -->
					<tr v-for="(item, index) in docList" :key="index">
						<td class="wid15 ">{{index | formatNum}}</td>
						<td class="wid20 ">{{item.docSize}}</td>
						<td class="wid20 ">{{item.startTime}}</td>
						<td class="wid20 ">{{item.endTime}}</td>
						<td class="wid25">
							<view class="play">播放</view>
						</td>
					</tr>
				</table>
			</view>
		</view>
	</view>
</template>

<script>
	import renDropdown from '../../components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import srcollTabs from '../../components/scroll-tabs/scroll-tabs.vue'
	export default {
		filters: {
			formatNum(n) {
				n = (n + 1).toString()
				return n[1] ? n : '0' + n
			}
		},
		components: {
			renDropdown,
			srcollTabs
		},
		created() {
			this.videoContext = uni.createVideoContext('myVideo')

			console.log('video', this.videoContext)
		},
		data() {
			return {
				showVideo: true,
				videoContext: '',
				myVideoSrc: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
				filterData: [
					[{
						text: '配电房1',
						value: ''
					}, {
						text: '配电房1',
						value: 1
					}, {
						text: '配电房2',
						value: 2
					}, {
						text: '配电房3',
						value: 3
					}],
					[{
						text: '摄像机1',
						value: ''
					}, {
						text: '摄像机1',
						value: 1
					}, {
						text: '摄像机2',
						value: 2
					}, {
						text: '摄像机3',
						value: 3
					}]
				],
				defaultIndex: [0, 0],
				navbar: [{
						id: 1,
						name: '配电房1'
					},
					{
						id: 2,
						name: '配电房2'
					},
					{
						id: 3,
						name: '配电房3'
					},
					{
						id: 4,
						name: '配电房4'
					},
					{
						id: 5,
						name: '配电房5'
					},
					{
						id: 6,
						name: '配电房6'
					},
					{
						id: 7,
						name: '配电房7'
					},
					{
						id: 8,
						name: '配电房8'
					},
					{
						id: 9,
						name: '配电房9'
					},
					{
						id: 10,
						name: '配电房10'
					},
					{
						id: 11,
						name: '配电房11'
					},
					{
						id: 12,
						name: '配电房12'
					}
				],
				docList: [{
						id: 1,
						docSize: '500MB',
						startTime: '00:01:00',
						endTime: '00:07:23'
					},
					{
						id: 2,
						docSize: '238MB',
						startTime: '00:01:00',
						endTime: '00:07:23'
					},
					{
						id: 3,
						docSize: '500MB',
						startTime: '00:01:00',
						endTime: '00:07:23'
					},
					{
						id: 4,
						docSize: '500MB',
						startTime: '00:01:00',
						endTime: '00:07:23'
					},
				],
				tabs: [{
						id: 1,
						name: '慢进',
						img: '../../static/image/rvc/slow-forword.png'
					},
					{
						id: 2,
						name: '快进',
						img: '../../static/image/rvc/fast-forword.png'
					},
					{
						id: 3,
						name: '暂停',
						img: '../../static/image/rvc/pause.png'
					},
					{
						id: 4,
						name: '单帧',
						img: '../../static/image/rvc/single-frame.png'
					},
					{
						id: 5,
						name: '全屏',
						img: '../../static/image/rvc/full-screen.png'
					},
					{
						id: 6,
						name: '下载',
						img: '../../static/image/rvc/download.png'
					},
					{
						id: 7,
						name: '抓图',
						img: '../../static/image/rvc/screenshot.png'
					},
					{
						id: 8,
						name: '录像',
						img: '../../static/image/rvc/recording.png'
					},
					{
						id: 9,
						name: '声音',
						img: '../../static/image/rvc/voice.png'
					}
				],
			}
		},
		methods: {
			onSelected(res) {
				console.log(res)
			},
			dateChange(d) {
				uni.showToast({
					icon: 'none',
					title: d
				})
			},
			// 控制视频
			controlVideo(index) {
				// 慢进
				if (index == 0) {
					this.videoContext.playbackRate(1.5)
				}
				// 快进
				if (index == 1) {
					this.videoContext.playbackRate(2)
				}
				// 暂停/播放
				if (index == 2) {
					this.videoContext.play()
					console.log('2 播放')
				}
				if (index == 4) {
					// 全屏
					this.videoContext.requestFullScreen()
					console.log('4', this.videoContext)
				}
				if (index == 5) {
					// 下载视频
					this.downloadVideo()
					// this.uploadVideo()
					console.log('5')
				}
				if (index == 6) {
					// 截图
				}
			},
			// download 视频
			downloadVideo() {
				console.log('下载视频')
				uni.downloadFile({
					url: this.myVideoSrc, //下载资源的地址网络
					success: function(res) {
						//console.log(res)
						// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
						// if (res.statusCode === 200) {
						//   wx.playVoice({
						//     filePath: res.tempFilePath
						//   })
						// }
						// 保存图片到本地
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(data) {
								//console.log(data);
								uni.showModal({
									title: '下载成功',
									content: '图片以保存至您的手机',
								})
							},
						})
					}
				})
			},

			// 下载视频的方法
			uploadVideo() {
				//下载视频
				console.log('下载视频')
				const downloadTask = uni.downloadFile({
					url: this.myVideoSrc, //视频路径
					success: res => {
						// console.log(res)
						if (res.statusCode == 200) {
							//下载的回调 不要都用res  要换一个使用 方便区分
							downloadTask.onProgressUpdate(red => {
								let that = this;
								that.percentCurrent = red.progress;

								console.log(that.percentCurrent);
								if (red.progress === 100) {
									uni.showToast({
										title: '下载完成！',
										icon: 'success',
										duration: 2000,
										position: 'top'
									});
									//当进程全部下载完成之后 在执行保存到相册的回调
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath, //注意这里是res 不是red
										success: () => {
											uni.showToast({
												title: '下载成功',
												icon: 'none'
											});
										},
										fail: () => {
											uni.showToast({
												title: '保存失败，请稍后重试',
												icon: 'none'
											})
										}
									})
								}
							})
						}
					}
				})
			},

			// 保存图片
			saveImage(imgUrl) {
				console.log('保存截图')
				uni.downloadFile({
					url: imgUrl, //图片地址
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败",
										icon: "none"
									});
								}
							});
						}
					}
				})
			},
			// 隐藏video
			hideVideo() {
				this.showVideo = !this.showVideo
			},
			// 视频播放异常
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;

		.dropdown-module {
			height: 88rpx;
			width: 100%;
			z-index: 999999 !important;
			white-space: nowrap;
			position: fixed;
			top: 0;

			.fixed {
				z-index: 999999 !important;
			}
		}

		.video-module {
			width: 100%;
			margin-top: 88rpx;
			z-index: 99;
		}

		video,
		.video-cover {
			width: 100%;
			height: 421rpx;
		}

		.document-module {
			background-color: #fff;
			border-radius: 10rpx;
			margin: 24rpx;

			// padding: 0 24rpx;
			.doc-title {
				height: 92rpx;
				line-height: 92rpx;
				font-size: 36rpx;
				margin-left: 48rpx;
			}

			.doc-list {
				padding-bottom: 24rpx;

				table {
					font-size: 26rpx;

					tr {
						display: flex;
						flex-direction: row;
						align-items: center;
						white-space: nowrap;

					}

					th,
					td {
						text-align: center;
					}

					th {
						height: 60rpx;
						line-height: 60rpx;
						color: #999;
					}

					td {
						height: 80rpx;
						line-height: 80rpx;
						white-space: nowrap;
						overflow: hidden;
						color: #333;
					}

					.play {
						width: 104rpx;
						height: 48rpx;
						color: #fff;
						background: #1dd3b8;
						border-radius: 26rpx;
						text-align: center;
						line-height: 48rpx;
					}

					.wid15 {
						width: 15%;
					}

					.wid20 {
						width: 20%;
					}

					.wid25 {
						width: 25%;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.right {
						text-align: right;
					}

					.left {
						text-align: left;
					}

					.border {
						border-bottom: 2rpx solid #F5F6F9;
					}
				}
			}
		}
	}
</style>
